<template>
  <div>
      <el-table :data="modelData.modelList" highlight-current-row :fit='false' :style="'margin-top:20px;min-height:'+(height-180)+'px'" @selection-change="setSelected" size="mini">
        <el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column>
        <el-table-column v-for="tableHeader in modelData.headerList" :key="tableHeader.keyId" :label="tableHeader.keyName" :width="modelData.headerWidth[tableHeader.keyId]*8+50" align="left">
          <template slot-scope="scope">
            <div @dblclick="toEdit(tableHeader,scope.row)" style='width:100%:height:100%'>
              <span >{{scope.row[tableHeader.keyId].text}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style='margin-top:10px'>
        <el-pagination
          @current-change="onCurrentChange"
          :current-page.sync="modelData.currentPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="modelData.total">
        </el-pagination>
      </div>
      <modelProperty :editerData="editerData"></modelProperty>
  </div>
</template>

<script>
import modelProperty from "@/components/model/modelProperty"

export default {
  name: 'modelTable',
  data(){
    return {
      height:window.innerHeight,
      editerData:{
        show:false,
        selectedModel:[],
        model:{
          brand:{text:''},
          series:{text:''},
          model:{text:''},
        },
        propertyKey:{
          keyId:'',
          keyName:'',
          propertyType:'',
        },
        text:'',
        url:''
      }
    };
  },
  methods:{
      setSelected:function(val){
        this.editerData.selectedModel=val;
      },
      toEdit:function(tableHeader,row){
        if(this.editerData.selectedModel.length==0)this.editerData.model=row;
        this.editerData.propertyKey=tableHeader;
        this.editerData.text='';
        this.editerData.url='';
        this.editerData.show=true;
      },
      onCurrentChange:function(val){
        this.$emit("tablePage",val);
      }
  },
  components:{
    modelProperty:modelProperty
  },
  created:function(){
    window.onresize=()=>{
      this.height=window.innerHeight;
    }
  },
  props:["modelData"]
}

</script>

<style scoped>

</style>
